import React , {Component } from 'react'
import addrole from'./index.module.css'
import { Input, Tree, Checkbox,Row, Col, Button, message} from 'antd'

export default class AddRole extends Component{
    state={
      roleName:'',
      selectedKeys:[],
      autoExpandParent:true,
      defaultExpandAll:false,
      menudata:[],
      handledata:[],
      handleone:'',
      pitchon:[{2:'用户列表'},{3:'黑名单'},{4:'角色列表'},{5:'创建角色'},{6:'班级列表'},{7:'添加班级'},{'sub8':'学院设置'},{'sub9':"课程设置"},{10:"学生列表"},{11:"添加学生"},{'sub12':'模板管理'},{'sub13':'录屏管理'}],
      submitMenu:[],
      submitHandle:[],
      handleEng:[] 
    }

        componentDidMount(){
          this.initData()
      }
  
      initData=()=>{

           //请求菜单权限的列表
          this.$httpReq(this.$api.roleList(),res=>{ 
            let arr =[]
            Object.keys(res.data.menuData).map(item=>arr.push(res.data.menuData[item]))

           this.setState({menudata:this.dealMenu(arr)})

            //请求操作权限列表
            this.setState({handleEng:res.data.oprObj})
            let asd =[]
            Object.keys(res.data.oprObj).forEach(item=>{
              asd.push(res.data.oprObj[item])
            })
            this.setState({handledata:asd})
        })

         
       
       
      }
      
      
       //菜单数据格式的处理
       dealMenu=menuData=>{
        let  data = []
          menuData.forEach(item => {        
            if(item.grade===1&&item.belongTitle!=='工作台'){
                let menu = {
                    key:"sub" +item.key,
                    title: item.belongTitle
                }
                data.push(menu)
               // return
            } else  if(item.grade===2||item.grade===3){
                  let parentsindex=data.findIndex(j=>j.title===item.belongTitle)
                  if(parentsindex===-1){
                      let menu = {
                          key: "sub" + item.key,
                          title: item.belongTitle,
                          children:[]
                      }
                      data.push(menu)
                  }
                  let index=data.findIndex(j=>j.title===item.belongTitle)
                  let subMenu = {
                        key: item.key,
                        title: item.menuName,
                  }
                  data[index].children.push(subMenu)
            }          
            })
            return data
        }


        

    //以下是菜单权限
    
    //选中小框的时候 打印选中的
    onCheck = (checkedKeys)=> {
      
      const {pitchon}=this.state
      let submitarr=[]
        //console.log('onCheck', checkedKeys);
        this.setState({checkedKeys})
        checkedKeys && checkedKeys.forEach(item=>{
          pitchon.forEach(j=>{
            if(j[item]) submitarr.push(...Object.keys(j))
          })
        })
       submitarr= submitarr.map(item=>{
          if(item.slice(3)){
           return item.slice(3)*1
          }else{
           return item*1
          }
        })
        submitarr.sort((a,b)=>a-b).map(item=> item.toString())
        this.setState({submitMenu:submitarr},()=>{})
      };
  
    //以下是操作权限列表
    onChange=(checkedValues)=> {
      this.setState({submitHandle:checkedValues})
    }

    //点击确认添加
    submit=()=>{
      //console.log(this.state.submitMenu)//要提交的菜单权限 数字数组
      
      const {roleName,handleEng,submitHandle,submitMenu}=this.state
      let arr=[]
      submitHandle.forEach(item=>{
        Object.keys(handleEng).forEach(j=>{
          if(handleEng[j]===item){
            arr.push(j)
          }
        })
      })
  
      //console.log(arr)//要提交的操作权限 字母 数组
      if(!roleName){
        message.info('角色名称为必填项')
      }else if(submitMenu.length<1){
        message.info('菜单权限为必选项')
      }else if(arr.length<1){
        message.info('操作权限为必选项')
      }else{
        message.info('添加成功')
        this.$httpReq(this.$api.addRole({roleName, menulimits:submitMenu, oprlimits:arr.join(','), datalimits:new Date().getTime(), status:'ok'}))
        this.props.history.push('/home/role/roleList')
      }
      
   }

    render(){
        window.t = this;
        const {selectedKeys,checkedKeys,handledata,roleName}=this.state
        return <div className={addrole.box} style={{width:'100%',height:'100%',position:'relative'}}>
            <div className={addrole.header}>
                角色名称：<Input placeholder="请输入角色名称" style={{width:'30%'}} value={roleName} onChange={e=>this.setState({roleName:e.target.value})}/>
            </div>
            <div className={addrole.content} style={{width:'100%',height:'420px'}}>
                <div className={addrole.left}>
                    <p style={{marginRight:'5px',width:'65px'}}>菜单权限</p>
                    <div className={addrole.list_limits} style={{border:'1px solid #BBBBBB', width:'230px',minHeight:'420px',fontSize:'12px',padding:'10px'}}>
                    <Tree
                      checkable
                      // expandedKeys={this.state.menudata.map(item => item.key)}//默认全部展开
                     
                      treeData={this.state.menudata}
                      onCheck={this.onCheck}
                      checkedKeys={checkedKeys}
                      onSelect={this.onSelect}
                      selectedKeys={selectedKeys}          
                    />
                    </div>
                </div>

                <div className={addrole.right}>
                    <p style={{marginRight:'10px',width:'65px'}}>操作权限</p>
                    <div className={addrole.list_limits} style={{border:'1px solid #BBBBBB', width:'230px',minHeight:'420px',fontSize:'12px',padding:'10px'}}>
                          
                        <Checkbox.Group style={{ width: '100%'}} onChange={this.onChange}>
                            <Row style={{display:'block'}}>
                              {
                                  handledata ? handledata.map(item=>{
                                    return <Col span={8} style={{marginBottom:'5px'}} key={item}>
                                    <Checkbox value={item}>{item}</Checkbox>
                                  </Col>
                                  }):null
                              }        
                            </Row>
                          </Checkbox.Group>            
                    </div>
                </div>
            </div> 
            {/*点击确认添加 按钮 */}
            <Button type="primary" style={{marginTop:'10px',marginLeft:'10px'}} onClick={this.submit}>确认添加</Button> 
        </div>
    }


  }




